<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>简易计算器</title>
    </head>
    <style>
        table {
            width: 400px;
            height: 600px;
        }
        
        #btn {
            width: 100px;
            height: 100px;
            font-size: 40px;
        }
        #result{
            font-size: 40px;
        }
        
        .color {
            background-color: gold;
        }
        
        .color1 {
            background-color: yellow;
        }
        
    </style>
    
    <script type="text/javascript">
        var sum=0;
        var Boo=false;//判断是否按下计算符号
        var ope;//存储计算符号的变量
         //获取数字
         function num(Num) {
         var result=document.getElementById('result');
         if (Boo) {
          result.value=Num;
           Boo=false;//若接受过运算符，文本框清零
         }else{
          if (result.value=='0') {
              result.value=Num;
         } else{
             result.value+=Num;
         }
       }
   }
         //避免出现两个小数点
         function dian () {
         var result=document.getElementById('result');
         if (result.value.indexOf('.')==-1) {
         result.value+='.';
         }
    }
         //清零，重新加载页面
          function clean() {
          location.replace(location)
         }
         //退格
         function backspace() {
         var result=document.getElementById('result');
         result.value=result.value.substring(0,result.value.length-1);
         if (result.value=='') {
             result.value=0;
         }
     }
         function calc(op){
         var result=document.getElementById('result').value*1;
         if (result=='') {
          result=0;
         }
         Boo=true;
         switch (ope){
          case '+':
             sum=sum+result;
             break;
         case '-':
             sum=sum-result;
             break;
         case '*':
             sum=sum*result;
             break;
         case '/':
             sum=sum/result;
             break;
         case '=':
             document.getElementById('result').value=sum;
             break;
         default:sum=parseFloat(result);
         break;
     }
     document.getElementById('result').value=sum;
     ope=op;
 }    
 
    </script>
    <body bgcolor="aqua">
        <table border="1px" cellspacing="0" align="center">
            <caption><b>简易计算器</b> </caption>
            <tr>
                <td colspan="4"><input type="text" id="result" value="" style="width: 410px;height: 100px;background-color: #7CFC00;" align-text="center" /></td>
            </tr>
            <tr>
                <td><input type="button"  id="btn" value="9" οnclick="num(9)"/></td>
                <td><input type="button"  id="btn" value="8" οnclick="num(8)"/></td>
                <td><input type="button"  id="btn" value="7" οnclick="num(7)" /></td>
                <td><input type="button"  id="btn" value="+" class="color1" οnclick="calc('+')" /></td>
            </tr>
            <tr>
                <td><input type="button"  id="btn" value="6" οnclick="num(6)"/></td>
                <td><input type="button"  id="btn" value="5" οnclick="num(5)"/></td>
                <td><input type="button"  id="btn" value="4" οnclick="num(4)"/></td>
                <td><input type="button"  id="btn" value="-" class="color1" οnclick="calc('-')"/></td>
            </tr>
            <tr>
                <td><input type="button"  id="btn" value="3" οnclick="num(3)"/></td>
                <td><input type="button"  id="btn" value="2" οnclick="num(2)"/></td>
                <td><input type="button"  id="btn" value="1" οnclick="num(1)"/></td>
                <td><input type="button"  id="btn" value="*" class="color1" οnclick="calc('*')"/></td>
                <!-- <td rowspan="2"><input type="button"  id="btn" value="=" οnclick="calc('=')"  style="width: 100px;height: 200px; background-color: red;" /></td> -->
            </tr>
            <tr>
                <td><input type="button"  id="btn" value="0" οnclick="num(0)"/></td>
                <!-- <td><input type="button"  id="btn" value="√" class="color" οnclick="num(√)"/></td> -->
                <!-- <td><input type="button"  id="btn" value="." class="color" οnclick="dian()"/></td> -->
                <td colspan="2"><input type="button"  id="btn" value="=" οnclick="calc('=')"   style="width: 200px;height: 100px; background-color: red;" /></td>
                <td><input type="button" id="btn" value="/" onclick="calc('/')"/></td>
            </tr>
            <!-- <tr>
                <td><input type="button"  id="btn" value="C" class="color" οnclick="clean()"/></td>
                <td><input type="button"  id="btn" value="←" class="color" οnclick='backspace()'/></td>
                <td><input type="button"  id="btn" value="/" class="color1" οnclick="calc('/')"/></td>
                <td><input type="button"  id="btn" value="*" class="color1" οnclick="calc('*')"/></td>
            </tr> -->
        </table>
    </body>
</html>